<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/beiyong.css"/>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.mui-table-view-cell>a:not(.mui-btn){
				margin: 0;
			}
			.tou{
				width: 100%;
				height: auto;
				padding: 20px 20px;
			}
			.kuang{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: 1px solid #DDE9FF;
				padding: 30px 20px;
				border-radius: 20px;
				background-color: #FFFFFF;
			}
			.qian{
				font-size: 25px;
				color:#666;
				font-weight: 500;
				font-family: "微软雅黑";
			}
			.qian span{ color:#7EB1FD;}
			.kuang button{ background:#7EB2FE;border:0;}
			.text{
				width: 100%;
				text-align: center;
				padding: 5px 0;
				color: #7c7c7c;
			}
			.mui-table-view-cell{
				background-color: #E7EFFE; 
			}
			.mui-table-view:before{
				background:#fff;
			}
			.mui-table-view:after{ background:#fff;}
			
			.tc:after{ background:#fff; left:0;}
			
			
			/*提现*/
			.withdraw{position:fixed;top:100%; width:100%; background:#fff; bottom:0; /*padding-top:50px;*/}
			
			#withdraw_btn {
			    background: #7DB1FD;
			    border: 0;
			}
			.list_item{ background:transparent;}
			.items{ height:60px!important; position:relative;     display: flex;  align-items: center;
                  justify-content: flex-start;}
			.items:after{left:0!important; /*background:#fff!important;*/}
			.list_item:after,.list_item:before{ /*background:#fff!important;*/}
			.mui-input-row .mui-input-clear~.mui-icon-clear{ top:20px;}
			.dsf:before{ height: 1px;   content: ''; position:absolute; left:50%; top:50%;  transform:translate(-50%,-50%);   width:65%; background:#666;}
			.white{ color:#fff!important;  }
			.tc img{
				width:30px; height:30px!important;
				position:absolute;
				top:50%; 
				transform: translateY(-50%);
			}
		.tc a{padding-left:35px!important;}
		</style>
		
	</head>

	<body>
		<div id="probapp">
			
			<header class="mui-bar mui-bar-nav hbg">
			    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			    <h1 class="mui-title">我的钱包</h1>
			   <button class="mui-btn mui-btn-link mui-pull-right white" @click="show" v-if="shown == 1">关闭</button>
			</header>
			<div class="mui-content" >
				<div class="tou">
					<div class="kuang">
						<div class="qian">
							<span>￥</span>{{wallet.balance}}
						</div>
						<button type="button" class="mui-btn mui-btn-blue"  @click="show" >提现</button>
					</div>
					<div class="text">
						金额满{{wallet.withdrawal_limit}}才能提现
					</div>
				</div>
				
				
				<ul class="mui-table-view">
			        <li class="mui-table-view-cell mui-media tc" onclick="goincome()" >
			        	<img class="mui-media-object mui-pull-left" src="../images/income.png">
			            <a class="mui-navigate-right ">
			                我的收入
			            </a>
			        </li>
			        <li class="mui-table-view-cell tc" onclick="goincome1()"  >
			        	<img class="mui-media-object mui-pull-left" src="../images/transaction.png">
			            <a class="mui-navigate-right ">
			                 交易记录
			            </a>
			        </li>
			      
			        
			    </ul>
			    
			    <div  class="withdraw" ref="withdraw">
			    	 <form id='login-form' class="mui-input-group list_item">
						<div class="mui-input-row items">
							<label>手机号</label>
							<input id='account' type="text" v-model="mobile" class="mui-input-clear mui-input"  placeholder="请输入手机">
						</div>
						<div class="mui-input-row items">
							<label>姓名</label>
							<input id='password' type="text" v-model="name"  class="mui-input-clear mui-input"  placeholder="请输入姓名">
						</div>
						<div class="mui-input-row items">
							<label>卡号</label>
							<input id='password' type="text"  v-model="card_num"  class="mui-input-clear mui-input" placeholder="请输入卡号">
						</div>
						<div class="mui-input-row items">
							<label>银行</label>
							<input id='password' type="text"  v-model="bank" class="mui-input-clear mui-input"  placeholder="请输入银行">
						</div>
						<div class="mui-input-row items">
							<label>金额</label>
							<input id='password' type="text" v-model="money" class="mui-input-clear mui-input"  placeholder="请输入金额">
						</div>
					</form>
				
					<div class="mui-content-padded">
						<button id='withdraw_btn' class="mui-btn mui-btn-block mui-btn-primary" @click="withdraw" >确定提现</button>
					</div>
			    </div>
			  
				
			</div>
			
			
		</div>
		
		
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/muishow.js"></script>

		

		
		<script type="text/javascript">
			mui.init();
			function goincome(){
				mui.openWindow({
				    url: 'income.html?id=1', 
				    id:'income'
				 });
			}
			function goincome1(){
				mui.openWindow({
				    url: 'income.html?id=2', 
				    id:'income1'
				 });
			}
			
			var app = new Vue({
				el:'#probapp',
				data: {
					wallet:'',
					mobile:'',
					name:'',
					card_num:'',
					bank:'',
					money:'',
					shown:0
					
				},
				mounted(){
					
					var that = this; 
					that.walletf();
				
				},
				methods:{
					walletf(){
						var that = this;
						
						let data = {
							url:"/api/Wallet/wallet_info",
							data:{
								access_token : acctoken()||""	
							}
						}
						ajax(data,function(res){
							if(res.code == -1){
								mui.toast(res.message);
							}
							if(res.code == 1){
								console.log(res);
								
								that.wallet = res.data[0]
								

							}
						})
					},
					yanz(mobile,name,card_num,bank,money){
						console.log("1234");
						var phone = /^1[34578]\d{9}$/;
						var names = /^[\u4E00-\u9FA5]{2,4}$/;
						var banks = /^[\u4E00-\u9FA5]{2,10}$/;
						var cardNum = /^([1-9]{1})(\d{14}|\d{18})$/;
						console.log(banks);
						if(!(phone.test(mobile))){ 
						
						        mui.toast("请输入正确的手机号码");  
						        return false; 
						}else if(!(names.test(name))){
								mui.toast("请输入正确的名称!");  
						        return false; 
						}else if(!(cardNum.test(card_num))){
								mui.toast("请正确输入银行卡号!");  
						        return false; 
						}else if(!(banks.test(bank))){
								mui.toast("请正确输入银行名称!");  
						        return false; 
						}else if(money < 100){
								mui.toast("至少提现100元");
								return false;
						}
						
						
						return true;
										
						
					},
					
					withdraw(){
						var that = this;
						
						if(that.yanz(that.mobile,that.name,that.card_num,that.bank,that.money)){
							let data = {
								url:"/api/Wallet/cut_wallet",
								data:{
									access_token : acctoken()||"",
									mobile:that.mobile,
									name:that.name,
									card_num:that.card_num,
									bank:that.bank,
									money:that.money	
								}
							}
							ajax(data,function(res){
								if(res.code == -1){
									mui.toast(res.message);
								}
								if(res.code == 1){
									console.log(res);
									var withdraw = that.$refs.withdraw;
									withdraw.style.transition = ".2s";
									withdraw.style.top = "100%";
									that.shown = 0;
									mui.alert("提现成功!");
									that.walletf();
								}
							})
						}
					},
					show(){
						var that = this;
						
						if(that.wallet.balance >= that.wallet.withdrawal_limit){
							var withdraw = that.$refs.withdraw;
							withdraw.style.transition = ".2s";
							if(!that.shown){
								withdraw.style.top = "44px";
								that.shown = 1;
							}else{
								withdraw.style.top = "100%";
								that.shown = 0;
							}
						}else{
							mui.toast("金额满"+that.wallet.withdrawal_limit+"才能提现")
						}
					},
				
					
				}
			})
			
		
			
			
		
		</script>
	</body>

</html>